<%= turbo_frame_tag 'project_form' do %>
<%= render Modal::DialogComponent.new(
 title: (project.persisted? ? "#{t("actions.edit")} #{Project.model_name.human}" : "#{t("actions.create")} #{Project.model_name.human}"),
 icon: icon_for(:projects),
 modal_box: { class: "max-h-screen w-full max-w-2xl" }) do %>

  <div class="space-y-4">
    <%= form_with(model: project, html: { class: 'flex flex-col gap-2', data: { turbo_frame: "_top" } }) do |f| %>
      <% if project.errors.any? %>
        <div class="alert alert-error">
          <%= project.errors.full_messages.to_sentence.capitalize %>
        </div>
      <% end %>

      <label class="input input-lg w-full">
        <span class="label"><%= Project.human_attribute_name(:name) %></span>
        <%= f.text_field :name, autofocus: true, required: true, class: "" %>
      </label>

      <% if project.new_record? %>
        <div class="mt-4 mb-4">
          <label class="label text-base mb-2 block">
            <%= t('.select_template') %>
          </label>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 justify-stretch items-stretch text-base-content">
            <div class="relative flex items-stretch justify-stretch">
              <%= f.radio_button :use_template, "", class: "hidden peer", id: "template_none" %>
              <label for="template_none" class="block p-4 rounded-field cursor-pointer hover:bg-neutral hover:text-neutral-content peer-checked:text-neutral-content peer-checked:bg-neutral">
                <div class="font-semibold uppercase mb-1"><%= t('.no_template') %></div>
                <p class="text-sm font-normal opacity-80">
                  <%= t('.start_from_scratch') %>
                </p>
              </label>
            </div>

            <% Project::Templatable::Template.all.each do |template| %>
              <div class="relative flex items-stretch justify-stretch">
                <%= f.radio_button :use_template, template.key, class: "hidden peer", id: "template_#{template.key}" %>
                <label for="template_<%= template.key %>" class="block p-4 rounded-lg cursor-pointer hover:bg-neutral hover:text-neutral-content peer-checked:text-neutral-content peer-checked:bg-neutral">
                  <div class="font-semibold uppercase mb-1 "><%= template.name %></div>
                  <p class="text-sm font-normal opacity-80">
                    <%= template.description %>
                  </p>
                </label>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>

      <div class="flex gap-2 mt-2 justify-end">
        <a class="btn btn-ghost" data-action="click->modal#close">
          <%= t('actions.cancel') %>
        </a>

        <% text = project.persisted? ? t('actions.update') : t('actions.create') %>
        <%= f.button text, class: "btn btn-primary" %>
      </div>
    <% end %>
  </div>
<% end %>
<% end %>
